<template>
  <view class="uni-section" :style="{'background-color':bgdcolor}">
    <view class="uni-section-header" @click="onClick">
      <view class="uni-section-header__decoration" v-if="type" :class="type" :style="{'background-color':color}">
        <!-- <text :style="{'background-color':color}" class="uni-section-header__decoration"></text> -->
      </view>

      <slot v-else name="decoration"></slot>

      <view class="uni-section-header__content">
        <text :style="{'font-size':titleFontSize,'color':titleColor}" class="uni-section__content-title"
          :class="{'distraction':!subTitle}">{{ title }}</text>
        <text v-if="subTitle" :style="{'font-size':subTitleFontSize,'color':subTitleColor}"
          class="uni-section-header__content-sub">{{ subTitle }}</text>
      </view>

      <view class="uni-section-header__slot-right">
        <slot name="right"></slot>
      </view>
    </view>

    <view class="uni-section-content" :style="{padding: _padding}">
      <slot />
    </view>
  </view>
</template>

<script>
  /**
   * Section 标题栏
   * @description 标题栏
   * @property {String} type = [line|circle|square] 标题装饰类型
   * 	@value line 竖线
   * 	@value circle 圆形
   * 	@value square 正方形
   * @property {String} title 主标题
   * @property {String} titleFontSize 主标题字体大小
   * @property {String} titleColor 主标题字体颜色
   * @property {String} subTitle 副标题
   * @property {String} subTitleFontSize 副标题字体大小
   * @property {String} subTitleColor 副标题字体颜色
   * @property {String} padding 默认插槽 padding
   */

  export default {
    name: 'UniSection',
    emits: ['click'],
    props: {
      color: {
        type: String,
        default: '#2979ff'
      },
      type: {
        type: String,
        default: ''
      },
      title: {
        type: String,
        required: true,
        default: ''
      },
      titleFontSize: {
        type: String,
        default: '14px'
      },
      titleColor: {
        type: String,
        default: '#333'
      },
      subTitle: {
        type: String,
        default: ''
      },
      subTitleFontSize: {
        type: String,
        default: '12px'
      },
      subTitleColor: {
        type: String,
        default: '#999'
      },
      padding: {
        type: [Boolean, String],
        default: false
      },
      bgdcolor: {
        type: String,
        default: '#f5f5f5'
      }
    },
    computed: {
      _padding() {
        if (typeof this.padding === 'string') {
          return this.padding
        }

        return this.padding ? '10px' : ''
      }
    },
    watch: {
      title(newVal) {
        if (uni.report && newVal !== '') {
          uni.report('title', newVal)
        }
      }
    },
    methods: {
      onClick() {
        this.$emit('click')
      }
    }
  }
</script>
<style lang="scss">
  $uni-primary: #C9DD22 !default;

  .uni-section {
    // background-color: #f5f5f5;

    .uni-section-header {
      position: relative;
      /* #ifndef APP-NVUE */
      display: flex;
      /* #endif */
      flex-direction: row;
      align-items: center;
      padding: 12px 10px;
      font-weight: 400;

      &__decoration {
        margin-right: 6px;
        // background-color: $uni-primary;

        &.line {
          width: 4px;
          height: 12px;
          border-radius: 10px;
          // background-color: #C9DD22;
        }

        &.circle {
          width: 8px;
          height: 8px;
          border-top-right-radius: 50px;
          border-top-left-radius: 50px;
          border-bottom-left-radius: 50px;
          border-bottom-right-radius: 50px;
        }

        &.square {
          width: 8px;
          height: 8px;
        }
      }

      &__content {
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        flex-direction: column;
        flex: 1;
        color: #333;

        .distraction {
          flex-direction: row;
          align-items: center;
        }

        &-sub {
          margin-top: 2px;
        }
      }

      &__slot-right {
        font-size: 14px;
      }
    }

    .uni-section-content {
      font-size: 14px;
    }
  }
</style>
